/* eslint-disable no-unused-vars */
/* eslint-disable eqeqeq */
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { SaveOutlined } from '@ant-design/icons'
import { withI18n } from '@lingui/react'
import { Card, Form, Input, Button, message, Select } from 'antd'
import { tailLayout, formItemLayout } from '@/utils/helper'
import styles from './index.less'
import '@/utils/index.less'
import { get, post, put } from '@/services/https'
import { NAME, USERPWD } from '@/utils/regExp'
import { UploadOutlined } from '@ant-design/icons'
import Upload from '@/utils/Upload'
import { merge } from 'lodash'
const { Option } = Select
const { TextArea } = Input
// 1超级管理员 2系统管理员 3审计管理员 4安全管理员
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class userDer extends React.Component {
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    initialValues: {
      course_name: '',
      course_type: 1,
      course_desc: '',
      course_content: '',
    },
    course_type: 1,
    config: {
      accept: 'image', //接受上传的文件类型：zip、pdf、excel、image
      max: 100000000000000, //限制上传文件大小
      url: 'course/logo/upload',
    },
    fileList: [],
    config2: {
      accept: '', //接受上传的文件类型：zip、pdf、excel、image
      max: 100000000000000, //限制上传文件大小
      url: 'course/file/upload',
    },
    fileList2: [],
  }
  formRef = React.createRef()
  componentDidMount() {
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      this.getData(this.props.match.params.id)
    } else {
    }
    this.setState({ accessibility: sessionStorage.getItem('accessibility') })
  }
  getData = (id) => {
    get('course/read?id=' + id).then((res) => {
      let initialValues = res.data
      this.setState({ course_type: initialValues.course_type })

      this.setState({
        fileList: [
          {
            uid: '1',
            name: initialValues.course_logo,
            url: initialValues.course_logo,
          },
        ],
      })
      this.setState({
        fileList2: [
          {
            uid: '1',
            name: initialValues.course_content,
            url: initialValues.course_content,
          },
        ],
      })
      this.formRef.current.setFieldsValue(initialValues)
    })
  }
  handleSaveBtn = (values) => {
    const { location, i18n } = this.props
    if (this.state.fileList.length == 0) {
      message.error('请上传封面图片')
      return
    }
    if (values.course_type == 3) {
    } else {
      if (this.state.fileList2.length == 0) {
        message.error('请上传课程内容')
        return
      } else {
        values.course_content = this.state.fileList2[0].url
      }
    }
    values.course_logo = this.state.fileList[0].url

    if (this.props.match.params.id && this.props.match.params.id != 0) {
      values.id = this.props.match.params.id * 1
      post('course/update', values).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`Modify`)
          this.props.history.push('/strategy/Curriculum')
        } else {
          message.error(res.info)
        }
      })
    } else {
      let data = {
        ...values,
      }
      post('course/create', data).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`The`)
          this.props.history.push('/strategy/Curriculum')
        } else {
          message.error(res.info)
        }
      })
    }
  }
  onChangeTop = (e) => {
    this.setState({ course_type: e })
  }
  clFna = () => {
    this.props.history.push('/strategy/Curriculum')
  }
  onSuccess = (fied) => {
    this.setState({
      fileList: [
        {
          uid: '1',
          name: fied.data,
          url: fied.data,
        },
      ],
    })
  }
  onSuccess2 = (fied) => {
    this.setState({
      fileList2: [
        {
          uid: '1',
          name: fied.data,
          url: fied.data,
        },
      ],
    })
  }
  onRemoveHeader = (e) => {
    this.setState({ fileList: [] })
  }
  onRemoveHeader2 = (e) => {
    this.setState({ fileList2: [] })
  }
  render() {
    const { location, i18n } = this.props
    const {
      initialValues,
      course_type,
      config,
      config2,
      fileList,
      fileList2,
    } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    return (
      <div>
        <Form {...formItemLayout} {...formProps}>
          <div className="ct">
            <div className="ban">
              <div className="tetli">
                {this.props.match.params.id !== 0 ? '编辑课程' : '新增课程'}
              </div>
              <div
                style={{
                  width: '60px',
                  height: '6px',
                  background:
                    'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
                }}
              ></div>
              <div className="add">
                <div
                  style={{
                    margin: '15px 0',
                  }}
                >
                  <Button
                    type="primary"
                    htmlType="submit"
                    icon={<SaveOutlined />}
                  >
                    {i18n.t`Baocun`}
                  </Button>
                  <Button
                    style={{ marginLeft: '15px' }}
                    onClick={this.clFna}
                  >{i18n.t`clFna`}</Button>
                </div>
              </div>
            </div>
            <div className="ma">
              <span className="Shu"></span>
              <span className="Tlei">基础信息</span>
            </div>
            <Form.Item
              style={{ marginTop: '25px' }}
              label="课程名称"
              name="course_name"
              rules={[
                {
                  required: true,
                },
                {
                  pattern: NAME,
                  message: i18n.t`Only`,
                },
              ]}
            >
              <Input className="Ip_60" />
            </Form.Item>
            <Form.Item
              label="封面图片"
              extra="*支持图片.png.jpg,分辨率建议272*168"
            >
              <div style={{ width: '60%' }}>
                <Upload
                  config={config}
                  fileList={fileList}
                  onSuccess={this.onSuccess}
                  onRemove={this.onRemoveHeader}
                  className="Ip_60"
                  style={{ display: 'block' }}
                >
                  <Button icon={<UploadOutlined />}>上传图片</Button>
                </Upload>
              </div>
            </Form.Item>
            <Form.Item label="课程描述" name="course_desc">
              <TextArea className="Ip_60" />
            </Form.Item>
            <div className="ma">
              <span className="Shu"></span>
              <span className="Tlei">课程内容</span>
            </div>
            <Form.Item
              style={{ marginTop: '25px' }}
              label="课程标签"
              name="course_label"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input className="Ip_60" />
            </Form.Item>
            <Form.Item label="课程类型" name="course_type">
              <Select className="Ip_60" onChange={this.onChangeTop}>
                <Option value={1}>MP4视频</Option>
                <Option value={2}>PDF文档</Option>
                <Option value={3}>网站链接</Option>
                <Option value={4}>图片(JPG/JPEG/PNG)</Option>
              </Select>
            </Form.Item>
            {course_type == 3 ? (
              <Form.Item
                label="课程内容"
                extra="注:http:// 或 https:// 开头"
                name="course_content"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <TextArea className="Ip_60" />
              </Form.Item>
            ) : (
              <Form.Item label="课程内容">
                <div style={{ width: '60%' }}>
                  <Upload
                    config={config2}
                    fileList={fileList2}
                    onSuccess={this.onSuccess2}
                    className="Ip_60"
                    style={{ display: 'block' }}
                    onRemove={this.onRemoveHeader2}
                    temp_value={this.state.course_type}
                  >
                    <Button icon={<UploadOutlined />}>上传课程</Button>
                  </Upload>
                </div>
              </Form.Item>
            )}
          </div>
        </Form>
      </div>
    )
  }
}
userDer.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default userDer
